<#macro scriptMacro>
  <script>
    layui.use(['form'], function () {
      var form = layui.form,
          layer = layui.layer,
          $ = layui.$;

      $("#saveBtn").on('click', function () {
        var postData = {};
        postData.version = $('input[name=curVersion]').val();
        postData.id = $('input[name=id]').val();
        postData.order = $('input[name=order]').val();
        postData.uri = $('input[name=uri]').val();

        var filters = new Array();
        layui.each($('.filterContainer'), function (filterIndex, filter) {
          let f = {}; // 过滤器对象
          let filterName = $(filter).find('input[name=filterName]').val();
          if (filterName) {
            let filterArgs = new Array();
            layui.each($(filter).find('.arg-holder'), function (argIndex, arg) {
              let k = $(arg).find('.key-input').val();
              let v = $(arg).find('.value-input').val();
              if (k && v) {
                filterArgs.push({"key": k, "value": v});
              }
            })
            f.args = filterArgs;
            f.name = filterName;
            filters.push(f);
          }
        })
        postData.filters = filters;

        var predicates = new Array();
        layui.each($('.predicateContainer'), function (predicateIndex, predicate) {
          let p = {}; // 断言对象
          let pName = $(predicate).find('input[name=predicateName]').val();
          if (pName) {
            let pArgs = new Array();
            layui.each($(predicate).find('.arg-holder'), function (argIndex, arg) {
              let k = $(arg).find('.key-input').val();
              let v = $(arg).find('.value-input').val();
              if (k && v) {
                pArgs.push({"key": k, "value": v});
              }
            })
            p.args = pArgs;
            p.name = pName;
            predicates.push(p);
          }
        })
        postData.predicates = predicates;

        $.ajax({
          url: "${request.contextPath}/system/route/save",
          type: "POST",
          data: JSON.stringify(postData),
          contentType: "application/json;charset=UTF-8",
          dataType: "json",
          processData: false,
          success: function (result) {
            layMsg(result.msg);
            if (result.success) {
              setTimeout(function () {
                var iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.reloadTable();
                parent.layer.close(iframeIndex);
              }, 1000);
            }
          }
        });
      })

      $('.add-filter-btn').on('click', function () {
        var html = `<div class="layui-form-item filterContainer">
          <label class="layui-form-label required">过滤器</label>
          <div class="layui-input-block">
            <input type="text" class="layui-input" name="filterName" placeholder="输入过滤器名称">
            <tip>过滤器名称可通过Gateway中的 <strong style="color: red">GatewayFilterFactory</strong> 的实现类确定</tip>
          </div>
          <div class="layui-input-block arg-container">
            <div class="arg-holder mt-5">
              <input type="text" class="layui-input layui-input-inline key-input" placeholder="参数">
              <input type="text" class="layui-input layui-input-inline value-input" placeholder="值">
              <button type="button" class="layui-btn layui-btn-primary layui-border-green layui-btn-xs add-btn">
                增加参数
              </button>
              <button type="button" class="layui-btn layui-btn-primary layui-border-red layui-btn-xs del-btn hide">删除
              </button>
            </div>
          </div>
          <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-primary layui-border-red layui-btn-xs del-filter-btn">删除过滤器
            </button>
          </div>
        </div>`;
        $('.filter-area').find('.filters-holder').append(html);
        bindAddArgBtn();
        bindDelArgBtn();
        bindDelFilterBtn();
      })

      $('.add-predicate-btn').on('click', function () {
        var html = `<div class="layui-form-item predicateContainer">
            <label class="layui-form-label required">断言</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" name="predicateName" placeholder="输入断言名称">
              <tip>断言名称可通过Gateway中的 <strong style="color: red">RoutePredicateFactory</strong> 的实现类确定</tip>
            </div>
            <div class="layui-input-block arg-container">
              <div class="arg-holder mt-5">
                <input type="text" class="layui-input layui-input-inline key-input" placeholder="参数">
                <input type="text" class="layui-input layui-input-inline value-input" placeholder="值">
                <button type="button" class="layui-btn layui-btn-primary layui-border-green layui-btn-xs add-btn">
                  增加参数
                </button>
                <button type="button" class="layui-btn layui-btn-primary layui-border-red layui-btn-xs del-btn hide">删除
                </button>
              </div>
            </div>
            <div class="layui-input-block">
              <button type="button" class="layui-btn layui-btn-primary layui-border-red layui-btn-xs del-predicate-btn">删除断言
              </button>
            </div>
          </div>`;
        $('.predicate-area').find('.predicates-holder').append(html);
        bindAddArgBtn();
        bindDelArgBtn();
        bindDelFilterBtn();
      })

      bindAddArgBtn();
      bindDelArgBtn();

      bindDelFilterBtn();
      bindDelPredicateBtn();
    });

    function bindAddArgBtn() {
      layui.use('layer', function () {
        var $ = layui.jquery;
        $(".add-btn").off('click').on('click', function () {
          var node = $(this).parents(".arg-holder").clone();
          $(node).find('input').val('').find('layui-btn').hide();
          var container = $(this).parents('.arg-container');
          $(container).append(node);
          var holderLength = $(container).find('.arg-holder').length;
          layui.each($(container).find('.arg-holder'), function (index, el) {
            if (index + 1 < holderLength) {
              $(el).find(".del-btn").removeClass('hide'),
                  $(el).find('.add-btn').addClass('hide');
            } else {
              $(el).find(".del-btn").addClass('hide'),
                  $(el).find('.add-btn').removeClass('hide');
            }
          })
          bindAddArgBtn();
          bindDelArgBtn();
        })
      })
    }

    function bindDelArgBtn() {
      layui.use('layer', function () {
        var $ = layui.jquery;
        $(".del-btn").off('click').on('click', function () {
          var holder = $(this).parents('.arg-container');
          var length = $(holder).find('.arg-holder').length;
          $(this).parents('.arg-holder').remove();
        })
      })
    }

    function bindDelFilterBtn() {
      layui.use(function () {
        var $ = layui.jquery;
        $('.del-filter-btn').off('click').on('click', function () {
          $(this).parents('.filterContainer').remove();
        })
      })
    }

    function bindDelPredicateBtn() {
      layui.use(function () {
        var $ = layui.jquery;
        $('.del-predicate-btn').off('click').on('click', function () {
          $(this).parents('.predicateContainer').remove();
        })
      })
    }

  </script>
</#macro>
<#macro styleMacro>
  <style>
    .arg-holder {
      min-height: 25px;
      display: block;
      line-height: 2.2;
    }

    .arg-holder .value-input {
      width: 200px !important;
      height: 28px;
    }

    .arg-holder .key-input {
      width: 100px !important;
      height: 28px;
    }

    .arg-holder .del-btn {
      margin-left: 5px;
    }

    .filter-area, .predicate-area {
      padding: 10px;
      border: 1px solid #b8b8b8;
      margin-bottom: 5px;
    }
  </style>
</#macro>

<@zlt.page scriptMacro=scriptMacro styleMacro=styleMacro>
  <body>
  <form class="layui-form layuimini-form" id="routeForm">
    <input type="hidden" name="curVersion" <#if curVersion??>value="${curVersion?c}"</#if> />
    <div class="layui-form-item">
      <label class="layui-form-label required">路由ID</label>
      <div class="layui-input-block">
        <input type="text" name="id" placeholder="请输入路由ID" <#if routeDefinition.id?has_content>readonly</#if>
                value="${routeDefinition.id!}" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label required">优先级</label>
      <div class="layui-input-block">
        <input type="number" name="order" placeholder="输入路由优先级" value="${routeDefinition.order!}" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label required">转发路径</label>
      <div class="layui-input-block">
        <input type="email" name="uri" placeholder="输入转发路径" value="${routeDefinition.uri!}" class="layui-input">
        <tip>前缀 lb: 代表使用客户端负载均衡</tip>
      </div>
    </div>
  </form>
  <div class="filter-area">
    <div class="filters-holder layui-form layuimini-form">
        <#if routeDefinition.filters??&&routeDefinition.filters?size gt 0>
            <#list routeDefinition.filters! as filter>
              <div class="layui-form-item filterContainer">
                <label class="layui-form-label required">过滤器</label>
                <div class="layui-input-block">
                  <input type="text" class="layui-input" name="filterName" placeholder="输入过滤器名称"
                          value="${filter.name!}">
                  <tip>过滤器名称可通过Gateway中的 <strong style="color: red">GatewayFilterFactory</strong> 的实现类确定</tip>
                </div>
                <div class="layui-input-block arg-container">
                    <#if filter.args??>
                        <#assign argSize = filter.args?size />
                        <#list filter.args! as k,v>
                            <#assign isLast= (k_index+1)==argSize/>
                          <div class="arg-holder mt-5">
                            <input type="text" class="layui-input layui-input-inline key-input" placeholder="参数"
                                    value="${k!}">
                            <input type="text" class="layui-input layui-input-inline value-input" placeholder="值"
                                    value="${v!}">
                            <button type="button"
                                    class="layui-btn layui-btn-primary layui-border-green layui-btn-xs add-btn <#if !isLast>hide</#if>">
                              增加参数
                            </button>
                            <button type="button"
                                    class="layui-btn layui-btn-primary layui-border-red layui-btn-xs del-btn <#if isLast>hide</#if>">
                              删除
                            </button>
                          </div>
                        </#list>
                    <#else>
                      <div class="arg-holder mt-5">
                        <input type="text" class="layui-input layui-input-inline key-input" placeholder="参数">
                        <input type="text" class="layui-input layui-input-inline value-input" placeholder="值">
                        <button type="button"
                                class="layui-btn layui-btn-primary layui-border-green layui-btn-xs add-btn">
                          增加参数
                        </button>
                        <button type="button" class="layui-btn layui-btn-primary layui-border-red layui-btn-xs del-btn">
                          删除
                        </button>
                      </div>
                    </#if>
                </div>
                <div class="layui-input-block">
                  <button type="button"
                          class="layui-btn layui-btn-primary layui-border-red layui-btn-xs del-filter-btn">删除过滤器
                  </button>
                </div>
              </div>
            </#list>
        <#else>
          <div class="layui-form-item filterContainer">
            <label class="layui-form-label required">过滤器</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" name="filterName" placeholder="输入过滤器名称">
              <tip>过滤器名称可通过Gateway中的 <strong style="color: red">GatewayFilterFactory</strong> 的实现类确定</tip>
            </div>
            <div class="layui-input-block arg-container">
              <div class="arg-holder mt-5">
                <input type="text" class="layui-input layui-input-inline key-input" placeholder="参数">
                <input type="text" class="layui-input layui-input-inline value-input" placeholder="值">
                <button type="button" class="layui-btn layui-btn-primary layui-border-green layui-btn-xs add-btn">
                  增加参数
                </button>
                <button type="button" class="layui-btn layui-btn-primary layui-border-red layui-btn-xs del-btn hide">删除
                </button>
              </div>
            </div>
            <div class="layui-input-block">
              <button type="button" class="layui-btn layui-btn-primary layui-border-red layui-btn-xs del-filter-btn">
                删除过滤器
              </button>
            </div>
          </div>
        </#if>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="button" class="layui-btn layui-btn-primary layui-border-green layui-btn-xs add-filter-btn">
          增加一组过滤器
        </button>
      </div>
    </div>
  </div>
  <div class="predicate-area">
    <div class="predicates-holder layui-form layuimini-form">
        <#if routeDefinition.predicates??&&routeDefinition.predicates?size gt 0>
            <#list routeDefinition.predicates! as predicate>
              <div class="layui-form-item predicateContainer">
                <label class="layui-form-label required">断言</label>
                <div class="layui-input-block">
                  <input type="text" class="layui-input" name="predicateName" placeholder="输入断言名称"
                          value="${predicate.name!}">
                  <tip>断言名称可通过Gateway中的 <strong style="color: red">RoutePredicateFactory</strong> 的实现类确定</tip>
                </div>
                <div class="layui-input-block arg-container">
                    <#if predicate.args??>
                        <#assign argSize = predicate.args?size />
                        <#list predicate.args! as k,v>
                            <#assign isLast= (k_index+1)==argSize/>
                          <div class="arg-holder mt-5">
                            <input type="text" class="layui-input layui-input-inline key-input" placeholder="参数"
                                    value="${k!}">
                            <input type="text" class="layui-input layui-input-inline value-input" placeholder="值"
                                    value="${v!}">
                            <button type="button"
                                    class="layui-btn layui-btn-primary layui-border-green layui-btn-xs add-btn <#if !isLast>hide</#if>">
                              增加参数
                            </button>
                            <button type="button"
                                    class="layui-btn layui-btn-primary layui-border-red layui-btn-xs del-btn <#if isLast>hide</#if>">
                              删除
                            </button>
                          </div>
                        </#list>
                    <#else>
                      <div class="arg-holder mt-5">
                        <input type="text" class="layui-input layui-input-inline key-input" placeholder="参数">
                        <input type="text" class="layui-input layui-input-inline value-input" placeholder="值">
                        <button type="button"
                                class="layui-btn layui-btn-primary layui-border-green layui-btn-xs add-btn">
                          增加参数
                        </button>
                        <button type="button"
                                class="layui-btn layui-btn-primary layui-border-red layui-btn-xs del-btn hide">删除
                        </button>
                      </div>
                    </#if>
                </div>
                <div class="layui-input-block">
                  <button type="button"
                          class="layui-btn layui-btn-primary layui-border-red layui-btn-xs del-predicate-btn">删除断言
                  </button>
                </div>
              </div>
            </#list>
        <#else>
          <div class="layui-form-item predicateContainer">
            <label class="layui-form-label required">断言</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" name="predicateName" placeholder="输入断言名称">
              <tip>断言名称可通过Gateway中的 <strong style="color: red">RoutePredicateFactory</strong> 的实现类确定</tip>
            </div>
            <div class="layui-input-block arg-container">
              <div class="arg-holder mt-5">
                <input type="text" class="layui-input layui-input-inline key-input" placeholder="参数">
                <input type="text" class="layui-input layui-input-inline value-input" placeholder="值">
                <button type="button" class="layui-btn layui-btn-primary layui-border-green layui-btn-xs add-btn">
                  增加参数
                </button>
                <button type="button" class="layui-btn layui-btn-primary layui-border-red layui-btn-xs del-btn hide">删除
                </button>
              </div>
            </div>
            <div class="layui-input-block">
              <button type="button" class="layui-btn layui-btn-primary layui-border-red layui-btn-xs del-predicate-btn">
                删除断言
              </button>
            </div>
          </div>
        </#if>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="button" class="layui-btn layui-btn-primary layui-border-green layui-btn-xs add-predicate-btn">
          增加一组断言
        </button>
      </div>
    </div>
  </div>
  <div class="layui-form layuimini-form">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn layui-btn-sm" id="saveBtn" type="button">保 存</button>
      </div>
    </div>
  </div>
  </body>
</@zlt.page>